<template>
  <div class="Withdrawal">
    <h3><span class="tag"></span>提现档位</h3>
    <div class="head">
      <span></span>
      <el-button size="small" class="btn" @click="add">新增</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-top: 10px"
      :header-cell-style="{ background: '#f5f7fa' }"
    >
      <el-table-column prop="num" label="提现金额（元）">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入提现金额"
            onkeyup="this.value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
            v-model="scope.row.num"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="jifen" label="所需积分">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入积分"
            onkeyup="this.value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
            v-model="scope.row.jifen"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="shenhe" label="提现方式">
        <template slot-scope="scope">
          <el-select v-model="scope.row.shenhe" placeholder="请选择">
            <el-option label="自动审核" value="1"> </el-option>
            <el-option label="手动审核" value="2"> </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="submit(scope.row)"
            plain
            >确认</el-button
          >
          <el-button size="small" @click="del(scope.row.id, scope.$index)" plain
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          num: 100,
          id: "",
          jifen: 10,
          shenhe: "1",
        },
        {
          num: 1000,
          id: "",
          jifen: 100,
          shenhe: "2",
        },
      ],
    };
  },
  methods: {
    submit(obj) {},
    del(id, index) {
      if (id === "") {
        this.tableData.splice(index, 1);
      } else {
      }
    },
    add() {
      this.tableData.push({
        num: "",
        id: "",
        jifen: "",
        shenhe: "1",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.Withdrawal {
  h3 {
    margin: 0 0;
    display: flex;
    align-items: center;
    .tag {
      display: inline-block;
      width: 5px;
      height: 18px;
      background-color: #7b94d8;
      margin-right: 10px;
    }
  }
  .head {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    span {
      font-weight: bold;
    }
  }
}
</style>